<template>
  <div>
    <el-dialog :title='option.title' :visible.sync='isShow' @close="closeUser" width="80%" @open="openCreate"
      :close-on-click-modal="false" center>
      <div v-loading="loading">
        <el-card>
          <el-form size="mini" ref="roomForm" :model="roomForm" :rules="rules" label-width="140px" label-position="left">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item  label="坐席中心" prop="CENTERNO">
                  <el-select v-model="roomForm.CENTERNO" clearable
                  placeholder="请选择坐席中心">
                  <el-option v-for="item in attendCenterOption" :key="item.FIELDKEY" :label="item.FIELDVALUE+'-'+item.FIELDKEY"
                    :value="item.FIELDKEY"></el-option>
                </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="ROOMNAME" label="房间名称">
                  <el-input v-model.trim="roomForm.ROOMNAME" placeholder="请输入房间名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="SEATNO" label="座位数">
                  <el-input-number v-model="roomForm.SEATNO" :min="1" :max="99999" placeholder="请输入工位数"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="IMAGENAME" label="图片名字">
                  <el-input v-model.trim="roomForm.IMAGENAME" placeholder="请输入图片名字"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item prop="URL" label="图片">
                  <el-col :span="6">
                    <el-upload class="avatar-uploader" :action="fileUploadUrl" :show-file-list="false"
                      :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-col>
                  <el-col :span="6" :offset="2" v-if="imageURL!=''">
                    <el-image style="width: 100px; height: 100px" :src="imageURL" fit="cover"></el-image>
                  </el-col>
                  <el-col :span="3"  :offset="2" v-if="imageURL!=''">
                    <el-button type="primary" size="mini" @click="previewImage">预览底图</el-button>
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="13" style="line-height:100%;">
                <el-form-item prop="IMAGEDESC" label="图片描述">
                  <el-input v-model.trim="roomForm.IMAGEDESC" placeholder="请输入图片描述"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item prop="REMARK1" label="备注">
                  <el-input v-model="roomForm.REMARK1" type="textarea" :rows="2" placeholder="请输入备注"></el-input>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item prop="REMARK2" label="备注2">
                  <el-input v-model="roomForm.REMARK2" type="textarea" :rows="2" placeholder="请输入备注2"></el-input>
                </el-form-item>
              </el-col> -->
              <el-col :span="12">
                <el-form-item prop="IMAGENO" label="状态图片号">
                  <el-select v-model="roomForm.IMAGENO" no-data-text="请先到“参数维护\地图参数\状态图标维护”进行维护" filterable placeholder="请选择图片号">
                    <el-option v-for="item in ImageNOOption" :key="item.IMAGENO" :label="item.IMAGENO"
                      :value="item.IMAGENO"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="4">
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="addBkImg">新增底图</el-button>
          </el-col> -->
            </el-row>
            <div  v-if="Visible">
              <img  class="imgL" :src="imageURL" alt="图片预览">
            </div>
            <div style="text-align:center;margin-top:20px">
              <el-button size="mini" @click='addType'>取消</el-button>
              <el-button type="primary" size="mini" @click="add">确认</el-button>
            </div>
          </el-form>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // 全局的参数
  import getGlobalParams from "@/common/utils/getGlobalParams";
  
  // YYGL
  import requestYg from "@/common/utils/requestYg";
  // 查询图片号
  import queryIcon from "@/message/siteManagement/iconManage/iconQuery";
  import manage from "@/message/siteManagement/workplacemonitoring/roomManage";
  import dictionary from '@/message/wfm/baseData/dictionaryManage/dictionaryQuery'
  import requestWFM from "@/common/utils/requestWFM";

  import {
    fabric
  } from "fabric";
  export default {
    name: "",
    props: {
      //父元素传递的数据
      option: Object
    },
    computed: {
      isShow: {
        //创建用户弹窗是否显示
        get: function () {
          return this.option.isShow;
        },
        set: function (newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    data() {
      return {
        imageURL:'',
         Visible: false,
        loading: false,
        // 后端可能会传的数据
        canvasObj: {},
        btnFlag: true,
        fileUploadUrl: '',
        attendCenterOption:[],
        roomForm: {
          CENTERNO:'',
          IMAGENO: '',
          IMAGENAME: '',
          IMAGEDESC: '',
          URL: '',
          REMARK1: '',
          REMARK2: '',
          ROOMNAME: "",
          SEATNO: null,
          bkImageUrl: "",
          stationList: [],
          stationListString: ""
        },
        changeBkImg: [],
        rules: {
          CENTERNO: [{
            required: true,
            message: "坐席中心必填",
            trigger: "blur"
          }],
          ROOMNAME: [{
            required: true,
            message: "房间名称必填",
            trigger: "blur"
          },
            { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
          ],
          SEATNO: [{
            required: true,
            message: "工位数必填且不能超过5位数",
            trigger: "blur"
          },
          ],
          URL: [{
            required: true,
            message: "图片路径必填",
            trigger: "blur"
          }],
          IMAGENAME: [{
            required: false,
            message: "图片名称必填",
            trigger: "blur"
          },
            { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
          ],
          IMAGEDESC: [
            {  max: 100, message: '长度不超过100 个字符', trigger: 'blur' }
          ],
          REMARK1: [
            {  max: 100, message: '长度不超过100 个字符', trigger: 'blur' }
          ],
          IMAGENO: [{
            required: true,
            message: "图片号必选",
            trigger: "change"
          }],
        },
        tableData: [],
        bkImageUrlList: [],
        ImageNOOption: [],
        room: {},
        // 对话框
        dialogVisible: false,
      };
    },
    created: function () {},
    watch: {},
    mounted() {
      // console.log("新增房间,mounted");
      //底图下拉框选项；
      // this.query();
      this.fileUploadUrl = getGlobalParams.get("ImgUploadAddress");
      this.queryImageNO();
       this.dictionaryQuery('AttendCenter').then(value => this.attendCenterOption = value);

    },

    methods: {
       addType() { //关闭弹窗事件，清楚表单验证
        this.option.isShow = false;
        this.$refs.roomForm.clearValidate();
        this.$refs.roomForm.resetFields();
      },
       add() {
        //添加
        this.$refs["roomForm"].validate(valid => {
          if (valid) {
            this.loading = true;
            let resBody = new manage()
            resBody.data.OPERFLAG = this.option.log == '1' ? 'I' : 'U';
            if (this.option.log == "2") {
              resBody.data.ROOMNO = this.option.currentRow.ROOMNO;
            }
            resBody.data.ROOMNAME = this.roomForm.ROOMNAME;
            resBody.data.SEATNO = this.roomForm.SEATNO;
            resBody.data.IMAGENO = this.roomForm.IMAGENO;
            resBody.data.IMAGENAME = this.roomForm.IMAGENAME;
            resBody.data.IMAGEDESC = this.roomForm.IMAGEDESC
            resBody.data.URL = this.roomForm.URL;
            resBody.data.REMARK1 = this.roomForm.REMARK1;
            resBody.data.REMARK2 = this.roomForm.REMARK2;
            resBody.data.CENTERNO = this.roomForm.CENTERNO;
            resBody.data.CENTERNAME = this.attendCenterOption.find(v => v.FIELDKEY == this.roomForm.CENTERNO).FIELDVALUE;
            console.log('resBody==='+JSON.stringify(resBody))
            requestYg(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  let mes = this.option.log == "1" ? "新增" : "修改";
                  this.$message({
                    type: "success",
                    message: `房间信息${mes}${response.SYS_HEAD.ReturnMessage}!`
                  });
                  this.isShow = false;
                  this.$emit("refreshTable");
                } else {
                  this.$message({
                    type: "error",
                    message: `${response.SYS_HEAD.ReturnMessage}!`
                  });
                }
                this.loading = false;
              })
              .catch(error => {
                this.loading = false;
              });
            this.$refs.roomForm.clearValidate(); //清楚表单验证
            this.$refs.roomForm.resetFields();
          } else {
            this.$message({
              type: "warning",
              message: "新增 房间请输入合法的数据！"
            });
            return false;
          }
        });
      },
      // 预览图片
      previewImage(){
        this.Visible = true;
      },
      async queryImageNO() {
        let resBody = new queryIcon();
        resBody.data.PAGEFLAG = 4;
        resBody.data.PAGEROWNUM = 100
        resBody.data.CURRPAGE = 1
        requestYg(resBody)
          .then(response => {
            this.totalRcrdNum = response.RSP_BODY.TOTALROWNUM ?
              response.RSP_BODY.TOTALROWNUM :
              0;
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.ImageNOOption = response.RSP_BODY.struct || []
              console.log(this.ImageNOOption)
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
              this.tableData = [];
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          });
      },
      handleAvatarSuccess(res, file) {
        this.imageURL = getGlobalParams.get("ImgDownloadAddress") + '/' + file.name
        let url =  this.imageURL.replace(getGlobalParams.get("ImageDownloadAddress"),'')
        this.roomForm.URL = url
      },
      beforeAvatarUpload(file) {
        const isType = file.type == 'image/jpg' || file.type == 'image/bpm' || file.type == 'image/png' ;
        const isLt10M = file.size / 1024 / 1024 < 10;
        if (!isType) {
          this.$message.error('上传头像图片只能是JPG、BPM、PNG格式!');
        }
        if (!isLt10M) {
          this.$message.error('上传头像图片大小不能超过 10MB!');
        }
        return isType && isLt10M;
      },
      closeUser() {
        //关闭弹窗清楚表单数据并清楚表单验证
        // 重置表单数据
        this.$refs.roomForm.clearValidate(); //清楚表单验证
        this.$refs.roomForm.resetFields();
        this.$emit("refreshTable");
      },
      openCreate() {
        //打开弹窗事件
        this.$nextTick(function () {
          if (this.option.log == "2") {
            // this.updateDate();
            this.roomForm = JSON.parse(JSON.stringify(this.option.currentRow));
            this.imageURL = getGlobalParams.get("ImageDownloadAddress") + '/' + this.roomForm.URL

          } else {}
        })
      },
      async dictionaryQuery(type) {
        let resBody = new dictionary();
        resBody.data.FIELDCODE = type
        resBody.data.CurrPage = 1
        resBody.data.PageRowNum = 400
        let response = await requestWFM(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          return response.BODY.FIEDATA;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      
    }
  };

</script>


<style lang="scss" scoped>
  * {
    list-style-type: none;
  }


  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    ;
    line-height: 100px;
    text-align: center;
  }

  .search_right {
    margin-left: 5px;
  }


   .imgL {
    width: 100%;
    // height: 813px;
    border: 1px solid black;
  }


  .selectTree {
    min-width: 150px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .el-card {
    width: 100%;
  }

  .el-form-item {
    margin-left: 30px;
  }

  .el-form-item1 {
    margin-left: 10px;
  }

  .box2-button {
    width: 80px;
  }

  .el-card {
    overflow: inherit;
  }

  .asideText {
    width: 100%;
    height: 35px;
    line-height: 33px;
    color: #409eff;
    text-align: center;
  }

  .dialogRow {
    margin-top: 20px;
  }

</style>
